<template>
 <div class="organization">
   <Header :show="true">组织机构</Header>
   <div class="content">
   		<ul>
   			<li v-for="item in arrList.organization">
   				<div class="left"><span></span></div>
   				<div class="right">
   					<p class="p1">{{item.institution}}</p>
   					<p class="p2" v-for="item1 in item.list">{{item1}}</p>
   				</div>
   			</li>
   		</ul>
   </div>
 </div>
</template>

<script>
import Header from '../base/Header'
	export default {
		data() {
			return {
				arrList:{},
				i:0
			}
		},
        components:{
        	Header
        },
        mounted(){
        	var id = this.$route.params.id;
        	this.fetchData(id);
        },
        methods: {
        	fetchData(id) {
        		let _this = this;
        		this.$http.get('static/data/invite.data')
        		.then(function(res){
        			_this.arrList = res.data[id].content;
        			_this.i = id;
        		}).catch(function(err){
        			console.log(err);
        		})
        	}
        }
	}
</script>

<style scoped lang="less">
.organization{
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 11;
    background: #f4f4f4;
	.content{
		background: #f4f4f4;
		padding: 50px 10px 10px;
		font-size: 0.28rem;
		ul{
			li{ 
				padding: 0.15rem;
				margin-top: 0.1rem;
				background: #fff;
				border-radius: 3px;
				overflow: hidden;
				.left{
					float: left;
					width: 5%;
					span{
						display: inline-block;
						width: 5px;
						height: 0.28rem;
						background: #ff6100;
						border-radius: 30%;
						vertical-align: middle;
					}
				}
				.right{
					float: right;
					width: 95%;
					.p1{color: #333;}
					.p2{color: #666;font-size: 0.26rem;line-height: 0.56rem;}
				}
			}
		}
	}
}
</style>